<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Hello MUI</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<style type="text/css">
		* {
			margin: 0rem;
			padding: 0rem;
			text-decoration: none;
			list-style: none;

		}

		html,
		body {
			background-color: #fff;
			width: 100%;
			height: 100%;
			/*font-size:  100rem;*/
			font-size: calc(100vw / 7.5);
			font-family: "microsoft yahei";
		}

		/*头部*/

		.wrapper .header {
			display: flex;
			width: 100%;
			height: 0.88rem;
			background: #809fba;
		}

		.wrapper .header div {
			height: 100%;
			font-size: 0.30rem;
			text-align: center;
			line-height: 0.88rem;
			color: #fff;
		}

		.con {
			flex: 8;
		}

		.arrow img {
			width: 0.41rem;
			height: 0.3rem;
			display: inline-block;
		}

		.dot img {
			width: 0.41rem;
			height: 0.09rem;
			display: inline-block;
			margin-bottom: 3px;
		}

		.arrow {
			flex: 1;
			/* background: url("../img/arrow.png") no-repeat center; */
			background-size: contain;
		}

		.dot {
			flex: 1;
		}

		/*内容*/

		.content {
		
			width: 100%;
			position: relative;
			min-height: 10.8rem;
		}

		.content form {
			width: 100%;
		}

		.content form input {
			font-size: 0.28rem;
		}

		.content form .info {
			box-sizing: border-box;
			height: 1rem;
			line-height: 1rem;
			width: 96%;
			margin-left: 3%;
			color: #9db2c3;
			border-color: #fff;
			border-bottom: 1px solid #e9f0f0;
		}

		.content form .sub {
			position: absolute;
			bottom: 0.8rem;
			left: 0.64rem;
			width: 6.25rem;
			height: 0.9rem;
			background: #7f9eba;
			color: #fff;
		}
	</style>
</head>

<body>
	<div class="wrapper">
		<div class="header">
			<div class="arrow">
				<img src="../img/arrow.png" alt="">
			</div>
			<div class="con">修改昵称</div>
			<div class="dot">
				<img src="../img/dot.png" alt="">
			</div>
		</div>
	</div>
	<div class="content">
		<form action="#" method="post">
			<input type="text" name="new_nickname" class="info" id="changename" value="" placeholder="请输入新的昵称" />
			<input type="button" class="sub" id="sub" value="确认">
		</form>
	</div>




	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery.min.js"></script>
	<script src="../js/layer/layer.js" type="text/javascript"></script>
	<script>
		$(".arrow").on("tap", function () {
			window.location.href = "./gerenziliao.html";
		})
		$("input").on("keyup",function(e){
			if(e.keyCode == 13){
				$("#sub").trigger("tap")
			}
		})

		$("#sub").on("tap", function (){
			var newname = $("#changename").val();
			if(!newname == ""){
				$.ajax({
					type: "POST",
					url: `${localStorage.top}/api/UserCenter/changeNickname`,
					data: {
						"new_nickname": newname,
						"TOKEN": `${localStorage.token}`
					},
					success: function(data){
						if(data.msg =="修改成功"){
							layer.msg(data.msg)
							localStorage.nickname = newname;
							setTimeout(function(){
								$(".arrow").trigger("tap");
								
							},500)

						}
					},
				})
			}else{
				layer.msg("请输入昵称")
			}
		})



		// function successed(data) {
		// 	console.log(data)
		// 	if(data.msg == "修改成功"){
		// 		localStorage.nickname = newname;
		// 		$(".arrow").trigger("tap");
		// 	}
		// }
	</script>
</body>

</html>